import React, { useState } from 'react';

const AlertList: React.FC = () => {
  const [alerts, setAlerts] = useState([
    { id: 1, message: '账号异常提醒' },
    { id: 2, message: '数据同步延迟' }
  ]);

  const closeAlert = (id: number) => {
    setAlerts(alerts.filter(alert => alert.id !== id));
  };

  return (
    <div className="alert-box">
      {alerts.map(alert => (
        <div key={alert.id} className="alert-item">
          <span>!</span>
          <span>{alert.message}</span>
          <button onClick={() => closeAlert(alert.id)}>X</button>
        </div>
      ))}
    </div>
  );
};



export default AlertList;